<template>
	<view class="">
		<img class="bg-img" src="@appstatic/img/my/bg-img.jpg" alt="">
		<view class="container">
			<view class="car">
				<view class="white"></view>
				<view class="pic" @click="toCarOrder">
					<image class="car-order-text" src="@appstatic/my/orderHome/carOrderText.png" alt=""></image>
					<image class="car-order" src="@appstatic/my/orderHome/carOrder.png" alt=""></image>
				</view>

			</view>
			<view class="mall">
				<view class="white"></view>
				<view class="pic" @click="toMallOrder">
					<image class="mall-order-text" src="@appstatic/my/orderHome/mallOrderText.png" alt=""></image>
					<image class="mall-order" src="@appstatic/my/orderHome/mallOrder.png" alt=""></image>
				</view>
			</view>
			<view class="activity" @click="toActivityOrder" style="margin-right: -15px;">
				<view class="white"></view>
				<view class="pic">
					<image class="mall-order-text" src="@appstatic/my/orderHome/mall_activityOrder.png" alt=""></image>
					<image class="mall-order" src="@appstatic/my/orderHome/activityOrder.png" alt=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			toCarOrder() {
				uni.navigateTo({
					url: "/module_my/pages/orderList/orderList"
				})
			},
			toMallOrder() {
				uni.navigateTo({
					//商城订单
					url: "/module_my/pages/mallList/mallList"
				})
			},
			toActivityOrder() {
				uni.navigateTo({
					//商城订单
					url: "/module_my/pages/activityList/activityList"
				})
			}
		}
	}
</script>

<style>
	.bg-img {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: -2;
	}

	.container {
		padding: 0px 16px 0px 16px;
	}

	.white {
		background-color: #ffffff;
		height: 100px;
		width: 100%;
		position: absolute;
		bottom: 0px;
		z-index: -1;
	}

	.pic {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.car {
		position: relative;
		padding-top: 34px;
	}

	.car-order-text {
		width: 82px;
		height: 16px;
		padding-left: 20px;
		bottom: -14px;
	}

	.car-order {
		width: 218px;
		height: 124px;
	}

	.mall {
		position: relative;
		padding-top: 10px;
	}

	.mall-order-text {
		width: 82px;
		height: 16px;
		padding-left: 20px;
		bottom: -14px;
	}

	.mall-order {
		width: 218px;
		height: 124px;
	}

	.activity {
		/* background-color: #ffffff;
		margin-top: 34px;
		padding-left: 20px;
		height: 100px;
		display: flex;
		align-items: center; */
		position: relative;
		padding-top: 10px;
	}

	.text {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 28px;
	}
</style>
